<template>
	<jk-select v-model="shiftId" :disabled="disabled" :clearable="clearable" :placeholder="placeholder" :option-list="shiftList" :size="size" @change="onChange"></jk-select>
</template>
<script>
    export default {
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: [String, Number],
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '班次'
            },
            size: {
                type: String,
                default: ''
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                shiftId: null,
                shiftList: []
            };
        },
        methods: {
            onChange(e) {
                this.$emit('change', e);
            }
        },
        watch: {
            value(newVal) {
                this.shiftId = newVal;
            },
            optionList: {
                handler(newVal) {
                    this.shiftList = newVal ? newVal.map(x => {
                        return {
                            id: x.id,
                            name: `${x.typeName}-${x.name}`
                        };
                    }) : [];
                },
                deep: true
            }
        }
    };
</script>
